<script setup name="Table">
import dbApi from '@/sql/sql-api'
const data = ref([
  {
    id: 1,
    name: '凡繁烦',
    address: '湖北省武汉市',
    birthday: '2020-10-21',
    phoneNumber: '18888888888',
    amount: 18542.01,
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
    remark: '666'
  },
  {
    id: 2,
    name: '张安',
    address: '湖北省襄阳市',
    birthday: '2020-07-13',
    phoneNumber: '18888888888',
    amount: -8542.31,
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
    remark: '666'
  },
  {
    id: 3,
    name: '武城',
    address: '湖北省荆州市',
    birthday: '2020-05-13',
    phoneNumber: '18888888888',
    amount: 942.42,
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
    remark: '666'
  },
]);

const searchColumns = ref([
  {
    label: '姓名',
    component: 'Input',
    field: 'username',
    componentProps: {
      placeholder: '请输入姓名',
    },
  },
  {
    label: '性别',
    component: 'Select',
    field: 'sex',
    componentProps: {
      placeholder: '请选择性别',
      allowClear: true,
      options: [
        {
          value: 1,
          label: '男',
        },
        {
          value: 2,
          label: '女',
        },
      ],
    },
  },
  {
    label: '生日',
    component: 'DatePicker',
    field: 'birthday',
    componentProps: {
      placeholder: '请选择生日',
      style: {
        width: '100%',
      },
    },
  },
]);

const columns = ref([
  {
    title: '姓名',
    dataIndex: 'name',
  },
  {
    title: '地址',
    dataIndex: 'address',
  },
  {
    title: '生日',
    dataIndex: 'birthday',
    hide: true,
  },
  {
    title: '联系电话',
    dataIndex: 'phoneNumber',
    defaultHide: true
  },
  {
    title: '余额',
    dataIndex: 'amount',
    slotName: 'amount',
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    slotName: 'avatar',
    width: 80,
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'remark',
    slotName: 'remark',
    defaultHide: true,
  },
]);

const visible = ref(false);

const handleAdd = () => {
  visible.value = true;
}
const handleBeforeOk = (done) => {
  console.log(formData.value)
  window.setTimeout(() => {
    done()
    // prevent close
    // done(false)
  }, 3000)
}
const handleCancel = () => {
  visible.value = false;
}

const formData = reactive({
  name: '',
  sex: null
});


onMounted(() => {
  dbApi.addUser({
    type: 1,
    tel: '13294115970',
    cookie: 'dssdfs'
  }).then(res => {
    console.log(res);
  })
})


</script>

<template>
  <page-wrapper>
    <table-wrapper
      :data="data"
      :columns="columns"
      row-key="id"
      :formColumns="searchColumns"
      column-resizable
      :bordered="{ wrapper: true, cell: true }"
    >
      <template #table-title>
        <a-space>
          <a-button type="primary" size="small" @click="handleAdd" v-auth="'system:user:add'">新建</a-button>
          <a-button type="primary" size="small" status="danger" v-auth="'system:user:delete'">删除</a-button>
        </a-space>
      </template>
      <template #amount="{ record }">
        <a-statistic
          :value="record.amount"
          :precision="2"
          :value-from="0"
          start
          animation
          show-group-separator
          :value-style="{fontSize: '14px',color:'rgb(var(--green-6))'}"
        />
      </template>
      <template #avatar="{ record }">
        <a-avatar :size="24">
          <img :src="record.avatar" />
        </a-avatar>
      </template>
    </table-wrapper>
  </page-wrapper>
  <a-modal v-model:visible="visible" draggable title="新建用户" @cancel="handleCancel" @before-ok="handleBeforeOk">
    <a-form :model="formData" :label-col-props="{span: 4}" :wrapper-col-props="{span:20}">
      <a-form-item field="name" label="姓名" required>
        <a-input v-model="formData.name" />
      </a-form-item>
      <a-form-item field="sex" label="性别">
        <a-select v-model="formData.sex">
          <a-option :value="1">男</a-option>
          <a-option :value="2">女</a-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style lang="less" scoped></style>
